<template>
	<view class="discount">
		<view class="h2">优惠卷</view>
		<view class="roll-box" v-for="(item, index) in couponList">
			<view class="roll-text-box">{{ item.tag }}</view>
			<view class="roll-left">
				<view class="roll-left-h2">{{ item.discount }}元</view>
				<view class="roll-left-text">满{{ item.min }}元使用</view>
			</view>
			<view class="roll-right">
				<view class="roll-right-h2">{{ item.name }}</view>
				<view class="roll-right-text">
					<view>{{ item.desc }}</view>
					<view>有效期：{{ item.days }}天</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			couponList: {
				type: Array
			}
		},
		data() {
			return {

			}
		},
	}
</script>

<style lang="scss" scoped>
	$marginBottom: 30rpx;
	$backColor: #f4f4f4;
	@import 'uview-ui/index.scss';

	.discount {
		margin-top: $marginBottom;
		background-color: $uni-bg-color;

		.h2 {
			line-height: 60px;
			text-align: center;
			font-size: 40rpx;
			padding: $marginBottom;
		}

		.roll-box {
			overflow: hidden;
			height: 180rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
			position: relative;
			background: radial-gradient(circle at 0px 60px, transparent 10px, #e0bb76 0) top;

			.roll-text-box {
				line-height: 25rpx;
				background-color: #e0bb76;
				width: 10vw;
				font-size: 25rpx;
				color: $uni-bg-color;
				padding: 5rpx 15rpx;
				&::after {
					content: '';
					position: absolute;
					height: 100%;
					width: 5px;
					top: 0;
					right: -5px;
					background-image: linear-gradient(to bottom, #e0bb76 5px, transparent 5px, transparent),
					 radial-gradient(10px circle at 5px 10px, transparent 5px, #e0bb76 5px);
					background-size: 5px 15px;
				}
			}
		}

		.roll-left {
			padding-left: 20rpx;
			float: left;
			width: 30vw;

			.roll-left-h2 {
				color: #b52b2e;
				font-size: 50rpx;
			}

			.roll-left-text {
				color: $uni-bg-color;
			}
		}

		.roll-right {
			float: left;

			.roll-right-h2 {
				color: $uni-bg-color;
				font-size: 30rpx;
				position: absolute;
				right: -75rpx;
				top: 43rpx;
				transform: rotate(36deg);
				background-color: $uni-color-error;
				width: 300rpx;
				text-align: center;
			}

			.roll-right-text {
				margin-top: 10rpx;
				font-size: 25rpx;
				color: $uni-bg-color;
			}
		}
	}
</style>
